<h2 class="kuiLocalDropdownTitle">Settings</h2>

<form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
  <fieldset
    class="kuiVerticalRhythm"
    role="group"
  >
    <div class="kuiLocalDropdownHeader">
      <legend
        id="consoleFontSize"
        class="kuiLocalDropdownHeader__label"
      >
        Font Size
      </legend>
    </div>

    <input
      input-focus
      ng-model="settings.vals.fontSize"
      name="fontSize"
      type="number"
      required
      class="kuiLocalDropdownInput kuiVerticalRhythmSmall"
      aria-labelledby="consoleFontSize"
      data-test-subj="setting-font-size-input"
    >

    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
      <input
        class="kuiCheckBox"
        type="checkbox"
        ng-model="settings.vals.wrapMode"
        aria-describedby="consoleFontSize"
      >
      <span class="kuiCheckBoxLabel__text">
        Wrap long lines
      </span>
    </label>
  </fieldset>

  <fieldset
    class="kuiVerticalRhythm"
    role="group"
  >
    <div class="kuiLocalDropdownHeader">
      <legend
        id="consoleAutocomplete"
        class="kuiLocalDropdownHeader__label"
      >
        Autocomplete
      </legend>
    </div>

    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
      <input
        class="kuiCheckBox"
        name="autocompleteFields"
        type="checkbox"
        ng-model="settings.vals.autocomplete.fields"
        aria-describedby="consoleAutocomplete"
      >
      <span class="kuiCheckBoxLabel__text">
        Fields
      </span>
    </label>

    <label class="kuiCheckBoxLabel kuiVerticalRhythmSmall">
      <input
        class="kuiCheckBox"
        name="autocompleteIndices"
        type="checkbox"
        ng-model="settings.vals.autocomplete.indices"
        aria-describedby="consoleAutocomplete"
      >
      <span class="kuiCheckBoxLabel__text">
        Indices &amp; Aliases
      </span>
    </label>
  </fieldset>

  <div class="kuiVerticalRhythm">
    <button
      ng-click="kbnTopNav.close()"
      class="kuiButton kuiButton--hollow"
    >
      Cancel
    </button>

    <button
      type="submit"
      ng-disabled="settingsForm.$invalid"
      class="kuiButton kuiButton--primary"
      data-test-subj="settings-save-button"
    >
      Save
    </button>
  </div>
</form>
